<template>
  <div style="padding:30px;">
    <el-button type="success" @click="addRoleHandler">添加身份</el-button>
    <el-alert
      :closable="false"
      title=""
      type="success">
    </el-alert>

    <el-table
      border
      :data="roleListData"
      style="width: 100%">

      <el-table-column
        type="expand"
        prop=""
        align="center"
        label=""
        width="80">
        <template v-slot="scoped">
          <el-tag v-for="(ele, index) in scoped.row.rules.split(',')" :key="index"
                  style="margin-right: 4px; margin-bottom: 4px;">{{ ele }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop=""
        align="center"
        label="ID"
        width="80">
        <template v-slot="scoped">
          {{ scoped.$index }}
        </template>
      </el-table-column>

      <el-table-column
        prop="role_name"
        label="角色名称"
        width="180">
      </el-table-column>

      <el-table-column
        :show-tooltip-when-overflow="true"
        prop="rules"
        label="权限"
        width="180">
      </el-table-column>

      <el-table-column
        align="center"
        prop="status"
        label="状态"
        width="180">
        <template v-slot="scoped">
          <el-switch
            @change="changeStatusHandler(scoped.row)"
            v-model="scoped.row.status == 1 ? true: false"></el-switch>
        </template>
      </el-table-column>

      <el-table-column
        prop=""
        label="操作">
        <template v-slot="scoped">
          <el-button type="success" size="mini">详情</el-button>
          <el-button type="warning" size="mini">编辑</el-button>
          <el-button type="danger" size="mini">删除</el-button>
        </template>

      </el-table-column>

    </el-table>
    <el-alert
      :closable="false"
    >
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 30, 400]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-alert>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="roleForm">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="roleForm.role_name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="权限" :label-width="formLabelWidth">
          <el-tree
            :data="authListData"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[212]"
            :default-checked-keys="[212]"
            :props="defaultProps">
          </el-tree>


        </el-form-item>


        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio-group v-model="roleForm.status">
            <el-radio label="1">开启</el-radio>
            <el-radio label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {roleListApi} from '@/api/role'

export default {
  name: 'RoleList',
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '100px',

      page: 1,
      size: 5,
      total: 100,
      roleListData: [],

      roleForm: {
        role_name: '',
        status: 1,
      },

      defaultProps: {
        children: 'children',
        label: 'label'
      },

      authListData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 11,
              label: '一级 1-1',
            }
          ]
        },
        {
          id: 2,
          label: '二级 2',
          children: [
            {
              id: 21,
              label: '二级 2-1',
              children: [
                {
                  id: 212,
                  label: '二级 2-1-2',
                }
              ]
            }
          ]
        }
      ]
    }
  },
  created() {
    this.getRoleList();
  },

  methods: {
    addRoleHandler() {
      this.dialogFormVisible = true;

    },
    changeStatusHandler(row) {
      row.status = row.status == 1 ? 0 : 1;
    },
    handleSizeChange(size) {
      this.size = size;
      this.getRoleList();

    },
    handleCurrentChange(page) {
      this.page = page;
      this.getRoleList();
    },
    async getRoleList() {
      const response = await roleListApi(this.page, this.size);

      this.roleListData = response.data.list;
      this.total = response.data.count;
    }

  }
}
</script>
